<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
            <!-- <div class="title total_title">{{title}}</div> -->
            <el-row type="flex" justify="start" v-loading="loading">
                <div class="audience_warp">
                    <el-form :model="audiencedata" ref="audiencedata" :rules="rules" label-width="130px">
                        <div class="filters-wrapper">
                            <div class="title total_title">{{title}}</div>
                            <el-form-item label="定向包名称：" required prop="name">
                                <el-input class="inp-width" v-model="audiencedata.name">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="定向包描述：" required prop="description">
                                <el-input class="inp-width" v-model="audiencedata.description" type="textarea"
                                    :autosize="{ minRows: 3, maxRows: 5}">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="定向包类型：" required>
                                <el-radio-group v-model="audiencedata.landing_type">
                                    <el-radio-button label="EXTERNAL">落地页</el-radio-button>
                                    <el-radio-button disabled label="SHOP">电商店铺推广</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">投放范围</div>
                            <el-form-item label="投放范围：" required>
                                <el-radio-group v-model="audiencedata.delivery_range">
                                    <el-radio-button label="DEFAULT">默认</el-radio-button>
                                    <el-radio-button disabled label="UNION">穿山甲</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">用户定向</div>
                        <el-form-item label="地域：">
                            <ul class="tab-tilte">
                                <li @click="selectDistrict('NONE')" :class="{active:audiencedata.district=='NONE'}">不限</li>
                                <li @click="selectDistrict('CITY')" :class="{active:audiencedata.district=='CITY'}">按省市</li>
                                <li @click="selectDistrict('COUNTY')" :class="{active:audiencedata.district=='COUNTY'}">按区县</li>
                            </ul>
                            <div class="tab-content">
                                <div v-show="audiencedata.district=='NONE'"></div>
                                <div v-show="audiencedata.district=='CITY'">
                                    <CityPicker v-model="audiencedata.citys"></CityPicker>
                                    <el-radio-group v-model="audiencedata.location_type_city" style="margin-top: 15px;">
                                        <span style="font-size: 14px;">受众位置类型：</span>
                                        <el-radio label="CURRENT">正在该地区的用户</el-radio>
                                        <el-radio label="HOME">居住在该地区的用户</el-radio>
                                        <el-radio label="TRAVEL">到该地区旅行的用户</el-radio>
                                        <el-radio label="ALL">该地区内的所有用户</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-show="audiencedata.district=='COUNTY'">
                                    <CountyPicker v-model="audiencedata.countys"></CountyPicker>
                                    <el-radio-group v-model="audiencedata.location_type_county" style="margin-top: 15px;">
                                        <span style="font-size: 14px;">受众位置类型：</span>
                                        <el-radio label="CURRENT">正在该地区的用户</el-radio>
                                        <el-radio label="HOME">居住在该地区的用户</el-radio>
                                        <el-radio label="TRAVEL">到该地区旅行的用户</el-radio>
                                        <el-radio label="ALL">该地区内的所有用户</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="性别：">
                            <el-radio-group v-model="audiencedata.gender">
                                <el-radio-button label="NONE">不限</el-radio-button>
                                <el-radio-button label="GENDER_FEMALE">男</el-radio-button>
                                <el-radio-button label="GENDER_MALE">女</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="年龄：">
                            <el-row type="flex">
                                <el-checkbox-button class="no-limit" style="margin-top: -1px;" label="1"
                                    v-model="isCheckedAllAge" >不限</el-checkbox-button>
                                <el-checkbox-group class="limit" 
                                    v-model="audiencedata.age">
                                    <el-checkbox-button v-for="(v, name) in selectAllData.age" :key="v" :label="v">
                                        {{name}}</el-checkbox-button>
                                </el-checkbox-group>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="抖音达人：">
                            <el-radio-group v-model="audiencedata.tiktok">
                                <el-radio-button label="1">不限</el-radio-button>
                                <el-radio-button disabled label="2">自定义</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="精选流量包：">
                            <el-radio-group v-model="audiencedata.superior_popularity_type">
                                <el-radio-button label="NONE">不限</el-radio-button>
                                <el-radio-button disabled label="APP">应用软件精选</el-radio-button>
                                <el-radio-button disabled label="GAME">游戏精选</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <div v-show="!options_show"><span class="collapse_header" @click="options_show = !options_show"><i
                                    class="el-icon-d-arrow-right"></i>显示高级选项</span></div>
                        <div v-show="options_show">
                            <el-form-item label="平台：">
                                <el-row type="flex">
                                    <el-checkbox-button class="no-limit" style="margin-top: -1px;" label="1"
                                        v-model="isCheckedAllPlatform">不限
                                    </el-checkbox-button>
                                    <el-checkbox-group class="limit" v-model="audiencedata.platform">
                                        <el-checkbox-button :label="v" v-for="(v, name) in selectAllData.platform" :key="v">{{name}}</el-checkbox-button>
                                    </el-checkbox-group>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="文章分类：">
                                <ul class="tab-tilte">
                                    <li @click="articleCur=1" :class="{active:articleCur==1}">不限</li>
                                    <li @click="articleCur=2" :class="{active:articleCur==2}">文章分类</li>
                                </ul>
                                <div class="tab-content">
                                    <div v-show="articleCur==1"></div>
                                    <div v-show="articleCur==2">
                                        <el-row type="flex" align="middle">
                                            <div class="select-panel-left">
                                                <span class="header-title">文章分类</span>
                                                <ul>
                                                    <li>
                                                        <el-checkbox v-model="isCheckedArticle" @change="selectAll('article_category', $event)" :indeterminate="isIndeterminate('article_category')">全选</el-checkbox>
                                                    </li>
                                                    <el-checkbox-group v-model="audiencedata.article_category">
                                                        <li v-for="(val, name) in selectAllData.article_category" :key="val">
                                                            <el-checkbox :label="val">
                                                                <el-row type="flex" align="middle"
                                                                    justify="space-between">
                                                                    {{name}}<i class="el-icon-arrow-right"></i>
                                                                </el-row>
                                                            </el-checkbox>
                                                        </li>
                                                    </el-checkbox-group>
                                                </ul>
                                            </div>
                                            <i class="el-icon-d-arrow-right"></i>
                                            <div class="select-panel-left">
                                                <span class="header-title">已选
                                                    <el-button @click="clear('article_category')" style="padding: 0;" type="text">
                                                        清空
                                                    </el-button></span>
                                                <ul>
                                                    <li class="dx-selected" v-for="selected in audiencedata.article_category"
                                                        :key="selected">
                                                        <el-row type="flex" justify="space-between" align="middle">
                                                            {{getSelectName('article_category', selected)}}<i @click="deleteSelected('article_category', selected)" class="el-icon-close"></i>
                                                        </el-row>
                                                    </li>
                                                </ul>
                                            </div>
                                        </el-row>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="网络：">
                                <el-row type="flex">
                                    <el-checkbox-button class="no-limit" style="margin-top: -1px;" label="1"
                                        v-model="isCheckedAllAc">不限
                                    </el-checkbox-button>
                                    <el-checkbox-group class="limit" v-model="audiencedata.ac">
                                        <el-checkbox-button :label="v" v-for="(v, name) in selectAllData.ac" :key="v">
                                            {{name}}
                                        </el-checkbox-button>
                                    </el-checkbox-group>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="过滤已转化用户：">
                                <el-radio-group v-model="audiencedata.hide_if_converted">
                                    <el-radio-button label="NO_EXCLUDE">不限</el-radio-button>
                                    <el-radio-button label="AD">广告计划</el-radio-button>
                                    <el-radio-button label="CAMPAIGN">广告组</el-radio-button>
                                    <el-radio-button label="ADVERTISER">广告账户</el-radio-button>
                                    <el-radio-button label="CUSTOMER">公司账户</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="运营商：">
                                <el-row type="flex">
                                    <el-checkbox-button class="no-limit" style="margin-top: -1px;" label="1"
                                        v-model="isCheckedAllCarrier">不限
                                    </el-checkbox-button>
                                    <el-checkbox-group class="limit" v-model="audiencedata.carrier">
                                        <el-checkbox-button :label="v" v-for="(v, name) in selectAllData.carrier" :key="v">
                                            {{name}}
                                        </el-checkbox-button>
                                    </el-checkbox-group>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="新用户：">
                                <el-row type="flex">
                                    <el-checkbox-button class="no-limit" style="margin-top: -1px;" label="1"
                                        v-model="isCheckedAllActivateType">不限
                                    </el-checkbox-button>
                                    <el-checkbox-group class="limit" v-model="audiencedata.activate_type">
                                        <el-checkbox-button :label="v" v-for="(v, name) in selectAllData.activate_type" :key="v">
                                            {{name}}
                                        </el-checkbox-button>
                                    </el-checkbox-group>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="手机品牌：">
                                <ul class="tab-tilte">
                                    <li @click="phoneCur=1" :class="{active:phoneCur==1}">不限</li>
                                    <li @click="phoneCur=2" :class="{active:phoneCur==2}">按品牌</li>
                                </ul>
                                <div class="tab-content">
                                    <div v-show="phoneCur==1"></div>
                                    <div v-show="phoneCur==2">
                                        <el-row type="flex" align="middle">
                                            <div class="select-panel-left">
                                                <span class="header-title">手机品牌</span>
                                                <ul>
                                                    <li>
                                                        <el-checkbox v-model="isCheckedDevice" :indeterminate="isIndeterminate('device_brand')">全选</el-checkbox>
                                                    </li>
                                                    <el-checkbox-group v-model="audiencedata.device_brand">
                                                        <li v-for="(val, name) in selectAllData.device_brand" :key="val">
                                                            <el-checkbox :label="val">
                                                                <el-row type="flex" align="middle"
                                                                    justify="space-between">
                                                                    {{name}}<i
                                                                        class="el-icon-arrow-right"></i>
                                                                </el-row>
                                                            </el-checkbox>
                                                        </li>
                                                    </el-checkbox-group>
                                                </ul>
                                            </div>
                                            <i class="el-icon-d-arrow-right"></i>
                                            <div class="select-panel-left">
                                                <span class="header-title">已选
                                                    <el-button @click="clear('device_brand')" style="padding: 0;" type="text">
                                                        清空
                                                    </el-button></span>
                                                <ul>
                                                    <li class="dx-selected" v-for="selected in audiencedata.device_brand"
                                                        :key="selected">
                                                        <el-row type="flex" justify="space-between" align="middle">
                                                            {{getSelectName('device_brand', selected)}}<i @click="deleteSelected('device_brand', selected)" class="el-icon-close"></i>
                                                        </el-row>
                                                    </li>
                                                </ul>
                                            </div>
                                        </el-row>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="手机价格：">
                                <div class="slider-wrap">
                                    <el-slider v-model="audiencedata.launch_price" range :marks="marks" :max="11000" :step="500"
                                        show-stops :format-tooltip="formatTooltip">
                                    </el-slider>
                                    <span>{{phonePricesStr}}</span>
                                </div>
                                <el-row type="flex" style="margin-top: 42px;">
                                    快速设置：<el-button v-for="(digital,index) in digitaldata" :key="digital.id" type="text"
                                        @click="digitalclick(index)">
                                        {{digital.number}}</el-button>
                                </el-row>
                            </el-form-item>
                            <span class="collapse_header" @click="options_show = !options_show"><i
                                    class="el-icon-d-arrow-left"></i>隐藏高级选项</span>
                        </div>
                    </div>
                    <div class="filters-wrapper">
                        <div class="title total_title">预算与出价</div>
                        <el-form-item label="出价方式：" required>
                            <el-radio-group v-model="audiencedata.smart_bid_type">
                                <el-radio-button label="SMART_BID_CUSTOM">手动</el-radio-button>
                                <el-radio-button label="SMART_BID_CONSERVATIVE">自动</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="投放方式：" required>
                            <el-radio-group v-model="audiencedata.flow_control_mode">
                                <el-radio-button label="FLOW_CONTROL_MODE_FAST">优先跑量</el-radio-button>
                                <el-radio-button label="FLOW_CONTROL_MODE_BALANCE">均衡投放</el-radio-button>
                                <el-radio-button label="FLOW_CONTROL_MODE_SMOOTH">优先低成本</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="预算：" required prop="budget">
                            <el-input type="number" placeholder="请输入预算金额" v-model="audiencedata.budget" class="input-with-select inp-width">
                                <el-select v-model="audiencedata.budget_mode" slot="prepend" placeholder="请选择" style="width: 100px;">
                                    <el-option label="日预算" value="BUDGET_MODE_DAY"></el-option>
                                    <el-option label="总预算" value="BUDGET_MODE_TOTAL"></el-option>
                                </el-select>
                                </el-input>
                        </el-form-item>
                        <el-form-item label="投放时间：" v-show="putmanual">
                            <ul class="tab-tilte">
                                <li @click="audiencedata.schedule_type='SCHEDULE_FROM_NOW'" :class="{active:audiencedata.schedule_type=='SCHEDULE_FROM_NOW'}">从今天起长期投放</li>
                                <li @click="audiencedata.schedule_type='SCHEDULE_START_END'" :class="{active:audiencedata.schedule_type=='SCHEDULE_START_END'}">设置开始和结束日期</li>
                            </ul>
                            <div class="tab-content">
                                <div v-show="audiencedata.schedule_type=='SCHEDULE_FROM_NOW'"></div>
                                <div v-show="audiencedata.schedule_type=='SCHEDULE_START_END'">
                                    <el-date-picker v-model="audiencedata.PutTime" type="daterange"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-top: 15px;" value-format="yyyy-MM-dd HH:mm">
                                    </el-date-picker>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="投放时段：">
                            <ul class="tab-tilte">
                                <li @click="PeriodCur=1" :class="{active:PeriodCur==1}">不限</li>
                                <li @click="PeriodCur=2" :class="{active:PeriodCur==2}">指定时间段</li>
                            </ul>
                            <div class="tab-content">
                                <div v-show="PeriodCur==1"></div>
                                <div v-show="PeriodCur==2">
                                    <TimePicker v-model="audiencedata.schedule_time"></TimePicker>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="付费方式：" required v-show="putmanual">
                            <el-radio-group v-model="audiencedata.pricing">
                                <el-radio-button label="PRICING_OCPM">按展示付费(oCPM)</el-radio-button>
                                <el-radio-button label="PRICING_CPA">按转化付费(CPA)</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="目标转化出价：" v-show="putmanual" prop="cpa_bid">
                            <el-input class="inp-width" placeholder="请输入出价金额" v-model="audiencedata.cpa_bid">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="预期成本：" v-show="!putmanual" prop="precostinpt">
                            <div>您的预估成本：x-xxx元 系统已根据上方预算为您进行全周期成本预估</div>
                            <el-checkbox v-model="audiencedata.adjust_cpa">我的预期成本不在此范围内，我需要在此基础上调整</el-checkbox>
                            <div v-show="audiencedata.adjust_cpa">
                                <el-input size="small" style="width: 200px;" v-model="audiencedata.precostinpt">
                                    <template slot="append">元</template>
                                </el-input></div>
                        </el-form-item>
                    </div>
                    <div class="filters-wrapper" style="margin-bottom: 8px;">
                        <el-form-item style="margin-bottom: 0;">
                            <el-row type="flex" justify="end">
                            <el-button @click="back">取消</el-button>
                            <el-button @click="submit" type="primary">保存定向包</el-button></el-row>
                        </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-row>
    </div>
</template>
<style>


</style>
<script>
    // import cityJson from '@/util/city.json'
    import CityPicker from '@/views/components/CityPicker'
    import CountyPicker from '@/views/components/CountyPicker'
    import TimePicker from '@/views/components/TimePicker'
    import { parseObject, audience_config } from '@/settings'
    // import { delete } from 'vuedraggable'
    export default {
        components: {
            CityPicker,
            CountyPicker,
            TimePicker
        },
        data() {
            var validateCpa_bid = (rule, value, callback) => {
                if (this.audiencedata.smart_bid_type != 'SMART_BID_CUSTOM') {
                    callback()
                    return
                }
                if (!this.audiencedata.cpa_bid || this.audiencedata.cpa_bid == '') {
                    callback(new Error("请输入目标转化出价"))
                    return
                }
                if (!/((^[1-9]\d{1,16})|^0)(\.\d{0,2}){0,1}$/.test(this.audiencedata.cpa_bid)) {
                    callback(new Error("请输入正确的金额"))
                    return
                }
                callback()
            }
            var validatePrecostinpt = (rule, value, callback) => {
                if (this.audiencedata.smart_bid_type == 'SMART_BID_CUSTOM' || !this.audiencedata.adjust_cpa) {
                    callback()
                    return
                }
                if (!this.audiencedata.precostinpt || this.audiencedata.precostinpt == '') {
                    callback(new Error("请输入预期成本"))
                    return
                }
                if (!/((^[1-9]\d{1,6})|^0)(\.\d{0,2}){0,1}$/.test(this.audiencedata.precostinpt)) {
                    callback(new Error("请输入正确的金额"))
                    return
                }
                callback()
            }
            var validateBudget = (rule, value, callback) => {
                if (!/((^[1-9]\d{1,16})|^0)(\.\d{0,2}){0,1}$/.test(value)) {
                    callback(new Error("请输入正确的金额"))
                    return
                }
                if (parseInt(value) < 300) {
                    callback(new Error("预算金额不能少于300"))
                    return
                }
                callback()
            }
            return {
                loading: false,
                options_show: false, // 显示高级选项
                projectId: 0,
                directId: 0,
                projectDetail: {},
                title: '',
                // citys: [],
                // cityLevel: [],
                // countyList: [],
                articleCur: 1, // 文章分类切换
                // articleList: [],
                phoneCur: 1, // 手机品牌切换
                PeriodCur: 1, // 投放时段切换
                // phonePrices: [500, 6000],
                phonePricesStr: '500~6000',
                marks: {
                    0: '0',
                    2000: '2000',
                    5000: '5000',
                    10000: '10000',
                },
                audiencedata: {
                    id: 0,
                    name: '',
                    description: '',
                    delivery_range: 'DEFAULT',
                    landing_type: 'EXTERNAL',
                    district: 'NONE',
                    citys: [], // 临时保存 需要根据district来设置city值
                    countys: [], // 临时保存 需要根据district来设置city值
                    city: [],
                    gender: 'NONE',
                    age: [],
                    location_type_county: 'CURRENT',
                    location_type_city: 'CURRENT',
                    location_type: 'CURRENT',
                    tiktok: 1,
                    superior_popularity_type: 'NONE',
                    platform: [],
                    ac: [],
                    hide_if_converted: 'NO_EXCLUDE',
                    carrier: [],
                    activate_type: [],
                    budget_mode:'BUDGET_MODE_DAY',
                    PutTime: [], // 临时保存时间
                    article_category: [],
                    start_time: '',
                    end_time: '',
                    smart_bid_type: 'SMART_BID_CUSTOM', // 出价方式
                    flow_control_mode: 'FLOW_CONTROL_MODE_FAST',
                    budget: '', // 广告预算
                    cpa_bid: '',
                    pricing: 'PRICING_OCPM',
                    adjust_cpa:false,
                    precostinpt:'',
                    schedule_type: 'SCHEDULE_FROM_NOW',
                    schedule_time: new Array(24*2*7 + 1).join('0'),
                    device_brand: [], // 受众手机品牌
                    launch_price: [0, 11000],
                },
                rules: {
                    name: [
                        { required: true, message: '请输入定向包名称', trigger: 'blur' },
                        // { validator: validateId, trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入定向包描述', trigger: 'blur' },
                        // { validator: validateId, trigger: 'blur' }
                    ],
                    budget: [
                        { required: true, message: '请输入预算金额', trigger: 'blur' },
                        // { pattern: /((^[1-9]\d{1,16})|^0)(\.\d{0,2}){0,1}$/, message: '请输入正确的金额', trigger: 'change'},
                        { validator: validateBudget, trigger: 'blur' }
                    ],
                    cpa_bid: [
                        // { required: true, message: '请输入目标转化出价', trigger: 'blur' },
                        // { pattern: /((^[1-9]\d{1,6})|^0)(\.\d{0,2}){0,1}$/, message: '请输入正确的金额', trigger: 'change'}
                        { validator: validateCpa_bid, trigger: 'blur' }
                    ],
                    precostinpt: [
                        { validator: validatePrecostinpt, trigger: 'blur' }
                    ]
                },
                selectAllData: audience_config,
                digitaldata: [{
                        id: 1,
                        minNumber: '2000',
                        maxNumber: '4000',
                        number: '2000元 ~ 4000元',
                    },
                    {
                        id: 2,
                        minNumber: '4000',
                        maxNumber: '6000',
                        number: '4000元 ~ 6000元',
                    },
                    {
                        id: 3,
                        minNumber: '6000',
                        maxNumber: '8000',
                        number: '6000元 ~ 8000元',
                    },
                    {
                        id: 4,
                        minNumber: '8000',
                        maxNumber: '10000',
                        number: '8000元以上',
                    }
                ],
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
            this.directId = this.$router.currentRoute.params.aid
            if (this.directId > 0) {
                this.title = '修改定向包'
            } else {
                this.title = '新建定向包'
            }
        },
        mounted() {
            this.loadData()
        },
        computed: {
            isCheckedAllAge: {
                get: function() {
                    return this.audiencedata.age.length == 0
                },
                set: function() {
                    this.audiencedata.age = []
                }
            },
            isCheckedAllPlatform: {
                get: function() {
                    return this.audiencedata.platform.length == 0
                },
                set: function() {
                    this.audiencedata.platform = []
                }
            },
            isCheckedAllAc: {
                get: function() {
                    return this.audiencedata.ac.length == 0
                },
                set: function() {
                    this.audiencedata.ac = []
                }
            },
            isCheckedAllCarrier: {
                get: function() {
                    return this.audiencedata.carrier.length == 0
                },
                set: function() {
                    this.audiencedata.carrier = []
                }
            },
            isCheckedAllActivateType: {
                get: function() {
                    return this.audiencedata.activate_type.length == 0
                },
                set: function() {
                    this.audiencedata.activate_type = []
                }
            },
            isCheckedArticle: {
                get: function() {
                    let total = Object.keys(this.selectAllData.article_category).length
                    // for (const k in this.selectAllData.article_category) {
                    //     if (this.selectAllData.article_category.hasOwnProperty(k)) {
                    //         total = total + 1
                    //     }
                    // }
                    return this.audiencedata.article_category.length == total
                },
                set: function(v) {
                    this.selectAll('article_category', v)
                }
            },
            isCheckedDevice: {
                get: function() {
                    let total = Object.keys(this.selectAllData.device_brand).length
                    // for (const k in this.selectAllData.device_brand) {
                    //     if (this.selectAllData.device_brand.hasOwnProperty(k)) {
                    //         total = total + 1
                    //     }
                    // }
                    return this.audiencedata.device_brand.length == total
                },
                set: function(v) {
                    this.selectAll('device_brand', v)
                }
            },
            putmanual: {
                get: function() {
                    return this.audiencedata.smart_bid_type == 'SMART_BID_CUSTOM'
                }
            }
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        this.projectDetail = e.data
                    })
                if (this.directId > 0) {
                    this.loading = true
                    this.$axios.get('/directional/detail', {
                            project_id: this.projectId,
                            id: this.directId
                        })
                        .then(e => {
                            this.loading = false
                            this.audiencedata = parseObject(this.audiencedata, e.data)
                            this.audiencedata.adjust_cpa = this.audiencedata.adjust_cpa && this.audiencedata.adjust_cpa == 1
                            if (!this.putmanual && this.audiencedata.adjust_cpa) {
                                this.audiencedata.precostinpt = e.data['cpa_bid']
                                this.audiencedata.cpa_bid = ''
                            }
                            if (this.audiencedata.district == 'CITY') {
                                this.audiencedata.citys = this.audiencedata.city
                                this.audiencedata.location_type_city = this.audiencedata.location_type
                            } else if (this.audiencedata.district == 'COUNTY'){
                                this.audiencedata.countys = this.audiencedata.city
                                this.audiencedata.location_type_county = this.audiencedata.location_type
                            }
                            this.articleCur = this.audiencedata.article_category.length > 0 ? 2 : 1
                            this.phoneCur = this.audiencedata.device_brand.length > 0 ? 2 : 1
                            // 时段问题
                            if (e.data.schedule_time && /^0+$/.test(e.data.schedule_time)) {
                                this.PeriodCur = 1
                            } else {
                                this.PeriodCur = 2
                            }
                            
                            if (!this.audiencedata.age) {
                                this.audiencedata.age = []
                            }
                            if (!this.audiencedata.platform) {
                                this.audiencedata.platform = []
                            }
                            if (!this.audiencedata.ac) {
                                this.audiencedata.ac = []
                            }
                            if (!this.audiencedata.carrier) {
                                this.audiencedata.carrier = []
                            }
                            if (!this.audiencedata.activate_type) {
                                this.audiencedata.activate_type = []
                            }
                            if (!this.audiencedata.article_category) {
                                this.audiencedata.article_category = []
                            }
                            if (!this.audiencedata.device_brand) {
                                this.audiencedata.device_brand = []
                            }
                            //PutTime
                            if (!this.audiencedata.PutTime) {
                                this.audiencedata.PutTime = []
                            }
                            if (this.audiencedata.start_time && this.audiencedata.end_time) {
                                this.audiencedata.PutTime.push(this.audiencedata.start_time)
                                this.audiencedata.PutTime.push(this.audiencedata.end_time)
                            }
                            console.log('this.audiencedata', this.audiencedata, e.data)
                        })
                }
            },
            selectDistrict(val) {
                this.audiencedata.district = val
            },
            handleCheckAllChange(e, type, choose) {
                this[choose][type].model = [];
            },
            handleCheckedCitiesChange(e, type, choose) {
                let checkedCount = e.length;
                this[choose][type].modelAll = checkedCount <= 0;
            },
            formatTooltip() {
                this.phonePricesStr = this.audiencedata.launch_price[0] + '元' + ' ~ ' + this.audiencedata.launch_price[1] + '元'
            },
            digitalclick(id) {
                var sxs = this.digitaldata[id];
                this.audiencedata.launch_price = [sxs['minNumber'], sxs['maxNumber']]
            },
            ptOpenDowOrUp: function () {
                this.show = !this.show
            },
            clear( key ) {
                this.audiencedata[key] = []
            },
            isIndeterminate(key) {
                let total = Object.keys(this.selectAllData[key]).length
                // for (const k in this.selectAllData[key]) {
                //     if (this.selectAllData[key].hasOwnProperty(k)) {
                //         total = total + 1
                //     }
                // }
                if (this.audiencedata[key].length > 0 && this.audiencedata[key].length < total) {
                    return true
                }
                return false
            },
            deleteSelected(c, key) {
                let idx = this.audiencedata[c].indexOf(key)
                if (idx != -1) {
                    this.audiencedata[c].splice(idx, 1)
                }
            },
            selectAll( key , event ) {
                if (!event) {
                    this.audiencedata[key] = []
                    return
                }
                for (let kk in this.selectAllData[key]) {
                    this.audiencedata[key].push(this.selectAllData[key][kk])
                }
            },
            getSelectName(c, k) {
                for (let kk in this.selectAllData[c]) {
                    if (this.selectAllData[c][kk] == k) {
                        return kk
                    }
                }
                return '未知错误'
            },
            getSelectAll(key) {
                let ret = []
                for (const k in this.selectAllData[key]) {
                    ret.push(this.selectAllData[key][k])
                }
                return ret
            },
            submit() {
                if (this.audiencedata.PutTime.length >= 2) {
                    this.audiencedata.start_time = this.audiencedata.PutTime[0]
                    this.audiencedata.end_time = this.audiencedata.PutTime[1]
                }
                let tmp = JSON.stringify(this.audiencedata)
                let postData = JSON.parse(tmp)
                // 整形数据
                delete postData.PutTime
                if (postData.district == 'CITY') {
                    postData.city = postData.citys
                    postData.location_type = postData.location_type_city
                } else if (postData.district == 'COUNTY'){
                    postData.city = postData.countys
                    postData.location_type = postData.location_type_county
                }
                if (postData.age.length == 0) {
                    for (const k in this.selectAllData.age) {
                        postData.age.push(this.selectAllData.age[k])
                    }
                }
                postData.adjust_cpa = postData.adjust_cpa ? 1 : 0
                if ( !this.putmanual && postData.adjust_cpa == 1) {
                    // if (!postData.precostinpt || !/((^[1-9]\d{1,6})|^0)(\.\d{0,2}){0,1}$/.test(postData.precostinpt)) {
                    //     this.$message.error('请输入预期成本')
                    //     return
                    // }
                    postData.cpa_bid = postData.precostinpt
                }
                delete postData.precostinpt
                delete postData.citys
                delete postData.countys
                delete postData.location_type_county
                delete postData.location_type_city
                delete postData.tiktok
                // if (postData.age.length == 0) {
                //     postData.age = this.getSelectAll('age')
                // }
                // if (postData.platform.length == 0) {
                //     postData.platform = this.getSelectAll('platform')
                // } 
                // if (postData.carrier.length == 0) {
                //     postData.carrier = this.getSelectAll('carrier')
                // }
                postData.projectid = this.projectId
                if (this.PeriodCur == 1) {
                  // 投放时段不限，全部重置为0
                  postData.schedule_time  = new Array(24*2*7 + 1).join('0')
                }
                console.log('sumbit data', postData)
                this.$refs['audiencedata'].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/directional/save', postData)
                        .then(() => {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            })
                            // 跳转 audience/1/1
                            this.$router.replace({
                                path: '/audience/' + this.projectId
                            })
                        })
                    }
                })
            },
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>
